import { defineComponent } from "vue";
import style from "./index.module.less";
import { ITextGroupPropsData, TextGroupsProps } from "./types";

export default defineComponent({
  name: "",
  props: TextGroupsProps,
  setup(props) {
    return () => {
      const renderMerge = (item: ITextGroupPropsData) => {
        return (
          <div class={"flex items-center justify-between w-full"}>
            <div class={"flex items-center"}>
              <span>{item.name}:</span>
              <span>{item.value}</span>
            </div>
            {item.right && item.right()}
          </div>
        );
      };
      const getWidth = (item: ITextGroupPropsData) => {
        return item.width || props.itemWidth || "50%";
      };
      const renderView = (item: ITextGroupPropsData) => {
        return (
          <div
            class={[
              "flex items-center w-full",
              item.textEllipsis ? style.textEllipsis : "",
            ]}
          >
            {item.name && <span>{item.name}:</span>}
            <span>{item.value}</span>
          </div>
        );
      };

      const renderItem = (item: ITextGroupPropsData) => {
        return (
          <div
            class={[
              "flex items-center text-[12px] text-[#666666] mt-[9px] ",
              props.childClass,
            ]}
            style={{
              width: getWidth(item),
            }}
          >
            {item.merge ? renderMerge(item) : renderView(item)}
          </div>
        );
      };
      if (props.data.length == 0) return null;
      return (
        <div class="flex flex-wrap">{props.data.map((e) => renderItem(e))}</div>
      );
    };
  },
});
